<template>
  <a-modal
    v-model:open="visible"
    title="看板调整"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="loading"
  >
    <a-table
      :dataSource="allBoardList"
      :columns="columns"
      :pagination="false"
      :loading="tableLoading"
      :bordered="true"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'isShow'">
          <a-switch v-model:checked="record.isShow" />
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup>

import { UploadOutlined } from "@ant-design/icons-vue"
const $api = inject("$api")

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  allBoardList: {
    type: Array,
    default: () => [],
  },
})
const visible = ref(props.visible)
watch(
  () => props.visible,
  (val) => {
    visible.value = val
  }
)
const allBoardList = ref([])
watch(
  () => props.allBoardList,
  (val) => {
    allBoardList.value = JSON.parse(JSON.stringify(val))
  },
  {
    immediate: true,
  }
)
const emit = defineEmits([
  "update:visible",
  "update:handleQuery",
  "update:handleOk",
])

const formRef = ref()
const formState = ref({})
const loading = ref(false)
const importLoading = ref(false)
const fileList = ref([])
const tableLoading = ref(false)

const columns = [
  {
    title: "序号",
    width: 50,
    align: "center",
    customRender: ({ index }) => index + 1,
    width: 80,
  },
  {
    title: "看板名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "是否显示",
    dataIndex: "isShow",
    align: "center",
  },
]

const handleOk = async () => {
  console.log(allBoardList.value)
  handleCancel()
  emit("update:handleOk", allBoardList.value)
}

const handleCancel = () => {
  emit("update:visible", false)
}
</script>
<style lang="less" scoped>
.modelLink {
  color: #1890ff;
  cursor: pointer;
}
.greenpPlainBtn {
  color: #52c41a;
  border-color: #52c41a;
  &:hover {
    color: #52c41a;
    border-color: #52c41a;
  }
}
</style>
